<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		var d1 = $("#d1");
		var obj = {};
		$(d1).click(function() {
			var x = event.offsetX;
			var y = event.offsetY;
			var a = point(x,y,'');
			var b = '';
			if(obj!=''){
				b = drawLine(obj.x,obj.y,x,y);
				}
			$(d1).append(a);
			if(b!=''){
				$(d1).append(b);
				}
			obj.x = x;
			obj.y = y;
		})
	
		function point(x,y,line){//»­µዊ			
			var oDiv=document.createElement('div');
			oDiv.style.position='absolute';
			oDiv.style.height='14px';
			oDiv.style.width='14px';
			oDiv.style.backgroundColor='black';
			if(line!=''&&line=='1'){
				oDiv.style.backgroundColor='red';
				oDiv.style.height='5px';
				oDiv.style.width='5px';
				}
			oDiv.style.left=x+'px';
			oDiv.style.top=y+'px';
			//document.body.appendChild(oDiv);
			return oDiv;//עӢ£º·µ»صŖµˇһ¸�½ڵ㣬µ«²¢δ׷¼ӵ½τµµא
			};
			
		function drawLine(x1,y1,x2,y2){//»­һ͵ֱПµķ½·¨
			var x=x2-x1;//¿닊			
			var y=y2-y1;//¸ݍ
			var frag=document.createDocumentFragment();
			if(Math.abs(y)>Math.abs(x)){//Ň¸��ĄǱࠀ´ض»­µ㶄Ӏ¾ݣ¨¾ΊȏÃ煇¸�·£©£¬ɧ¹�ҹ£¬
			if(y>0)//ֽ؅»­Пˇ֢ҹµ
			
			for(var i=0;i<y;i++){
			var width=x/y*i  //x/yˇֱ½ȁ½¸�¤µıȣ¬¸�¸����λ׃
			{
			frag.appendChild(point(width+x1,i+y1,'1'));
			}
			}
			if(y<0){//Ԑʱº󋇵¹؅»­Пµ
			for(var i=0;i>y;i--){
			var width=x/y*i
			{
			frag.appendChild(   point(width+x1,i+y1,'1'));
			}
			}
			}
			}//end if
			else {
			if(x>0)//ֽ؅»­Пˇ֢ҹµ
			for(var i=0;i<x;i++){
			var height=y/x*i
			{
			frag.appendChild(point(i+x1,height+y1,'1'));
			}
			}
			if(x<0){//Ԑʱº󋇵¹؅»­Пµ
			for(var i=0;i>x;i--){
			var height=y/x*i
			{
			frag.appendChild(   point(i+x1,height+y1,'1'));
			}
			}
			}//end if
			}
			
			return frag;
			}
	})
</script>
<style>
#d1 {
	width: 90%;
	height: 600px;
	background: #CCC;
	border: 1px solid red;
	position: relative;
	left: 100px;
	top: 100px;
}
</style>
</head>
<body>
	<div id="d1">
	</div>
</body>
</html>